Problem

The "Butler Actions" pane's empty state (welcome screen with setup instructions) was not scrollable when the content exceeded the viewport height. This resulted in content being cut off and inaccessible to users, particularly when the pane was resized to a smaller height.

Solution

Fixed the scrolling behavior by updating the CSS for .feed__empty-state and .feed__empty-state__content in Feed.svelte:

Key changes:

• Changed min-height: 100% to height: 100% on .feed__empty-state to create a proper scrolling container
• Added overflow-y: auto to enable vertical scrolling when content overflows
• Added overflow-x: hidden to prevent unwanted horizontal scrolling
• Added scrollbar hiding styles (matching the existing .feed-list pattern for visual consistency)
• Updated .feed__empty-state__content margin from margin-bottom: 40px to margin: auto 0 to center content vertically when it fits, while still allowing scrolling when it doesn't

Visual Demonstration

The demonstration shows:

• Left pane (BEFORE): Content is cut off and cannot be scrolled - notice the "cannot scroll" indicator
• Right pane (AFTER): Content is fully scrollable - all content remains accessible regardless of pane height

Technical Details

The fix maintains the centered appearance of content when it fits within the viewport while enabling scrolling when needed. This is achieved using margin: auto 0 on the content wrapper, which:

• Centers content vertically when viewport height > content height
• Allows natural scrolling when content height > viewport height

The scrollbar is hidden to maintain visual consistency with the existing .feed-list component that displays Butler Actions entries.

Impact

• ✅ Empty state content is now fully accessible when pane is small
• ✅ Content remains visually centered when it fits in viewport
• ✅ Consistent with existing scrolling patterns in the application
• ✅ CSS-only change - no breaking changes to functionality

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.